<!-- 设备总数 -->
<template>
    <div class="deviceTree">
        <deviceListItem
            @currentClick="currentClick"
            @gotoDetail="gotoDetail"
            :name="currentNodeName"
            :data="data"
            :listTreeData="listTreeData"
            :currentNodeName="currentNodeName"
            type="2"
        ></deviceListItem>
    </div>
</template>

<script>
import {listData} from '@/mockData/monitorCenter.js'
import deviceListItem from './deviceListItem'
export default {
    components: {
        deviceListItem
    },
    name: 'DeviceTree',
    props: ['currentNodeId', 'currentNodeName', 'treeData'],
    data() {
        return {
            listData1: [],
            listData2: [],
            activeNames: ['one', 'two', 'three', 'four', 'five']
        }
    },
    mounted() {
        this.$nextTick(() => {
            var listData1 = listData.filter((t) => t.id < 10)
            console.log(listData2, 'listData2....')
            this.listData1 = listData1
            var listData2 = listData.filter((t) => t.id > 10)
            this.listData2 = listData2
        })
    },
    methods: {
        getHeaderClass(level) {
            return level == 1 ? 'normal' : level == 2 ? 'lx' : 'gj'
        },
        getBottomClass(type, level) {
            if (type == 1 && level == 1) {
                return 'dbzc'
            } else if (type == 2 && level == 1) {
                return 'sbzc'
            } else {
                return 'yc'
            }
        },
        getLevelImg(level) {
            return level == 1
                ? require('@/assets/images/monitor/warn1.png')
                : level == 2
                ? require('@/assets/images/monitor/warn2.png')
                : require('@/assets/images/monitor/warn3.png')
        },
        getImg(type) {
            return type == 1 ? require('@/assets/images/monitor/db.png') : require('@/assets/images/monitor/sb.png')
        },
        formatTitle(item) {
            // 可根据节点类型/状态拼接更丰富的标题文案
            return item.title
        },
        getItemClass(item) {
            // 根据设备状态返回不同样式类名，方便做颜色/图标区分
            const statusMap = {
                normal: 'device-normal',
                online: 'device-online',
                fault: 'device-fault',
                alarm: 'device-alarm',
                off: 'device-off'
            }
            return statusMap[item.status] || ''
        }
    }
}
</script>

<style lang="scss">
.deviceTree {
    .gjw-list {
        margin: 10px 0;
    }
    .gjw-list-list {
        overflow-y: auto;
        padding-top: 0px;
        margin-bottom: 10px;
        .gjw-list-item {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding-left: 10px;
            padding-top: 3px;
            .item {
                margin-right: 10px;
                width: calc((100% - 60px) / 6);
                height: 100px;
                border-radius: 4px;
                background: #fff;
                margin-bottom: 10px;
                box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
                position: relative;
                .item-header {
                    font-size: 12px;
                    height: 35px;
                    line-height: 35px;
                    background-color: #55cca4;
                    border-top-right-radius: 4px;
                    border-top-left-radius: 4px;
                    color: #fff;
                    overflow: hidden;
                }
                .db {
                    background-color: #55cca4;
                }
            }
            .sb {
                background-color: #6caae5;
            }
        }
    }

    .gjw-list-list .gjw-list-item .item .item-header img {
        float: left;
        margin: 10px 6px 0 10px;
    }
    .gjw-list-list .gjw-list-item .item .item-header label {
        font-size: 14px;
        float: left;
    }

    .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
        float: right;
        height: 35px;
        text-align: right;
    }
    .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
        float: right;
        margin-right: -10px;
    }
    .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
        font-size: 12px;
    }

    .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
        float: right;
        width: 10px;
        margin-right: 24px;
    }

    .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
        width: 8px;
        height: 8px;
        display: block;
        border-radius: 8px;
        float: right;
        margin-right: 10px;
        margin-top: 14px;
    }
    .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
        background-color: #00ffa9;
    }
    .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
        background-color: #77dbb9;
    }
    .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
        background-color: #00ffa9;
    }

    .gjw-list-list .gjw-list-item .item .item-bottom {
        background-color: #e2f7f0;
        height: 65px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .gjw-list-list .gjw-list-item .item .dbzc {
        background-color: #e2f7f0 !important;
    }
    .gjw-list-list .gjw-list-item .item .sbzc {
        background-color: #e9f6fe !important;
    }
    .gjw-list-list .gjw-list-item .item .yc {
        background-color: #f4f4f4 !important;
    }

    .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
        font-size: 14px;
        color: #666;
        padding-top: 13px;
        padding-bottom: 3px;
    }
    .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
        font-size: 14px;
        color: #333;
    }
    .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
        font-size: 14px;
        color: #666;
    }
    .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
        font-size: 14px;
        color: #333;
    }
    .gjw-list-page {
        height: 40px;
        padding-top: 10px;
        text-align: right;
    }
    .cursor {
        cursor: pointer;
    }
    .deviceImg {
        width: 22px;
        margin: 0 5px;
    }
    .el-collapse-item__content {
        padding: 0;
    }
    .el-collapse-item__wrap {
        border: none;
    }
    .el-collapse-item__header {
        height: 32px;
        line-height: 32px;
    }
    .oneLevel {
        .el-collapse-item__header {
            background-color: rgba(153, 153, 153, 0.8);
        }
    }
    .twoLevel {
        .el-collapse-item__header {
            padding-left: 20px;
            background-color: rgba(153, 153, 153, 0.6);
        }
    }
    .threeLevel {
        .el-collapse-item__header {
            padding-left: 40px;
            background-color: rgba(153, 153, 153, 0.4);
        }
    }
    .fourLevel {
        .el-collapse-item__header {
            padding-left: 60px;
            background-color: rgba(153, 153, 153, 0.2);
        }
    }
    .fiveLevel {
        .el-collapse-item__header {
            padding-left: 80px;
            background-color: rgba(153, 153, 153, 0.1);
        }
    }
}

/* 不同状态样式示例，可根据UI需求调整 */
.device-normal {
    color: #67c23a; /* 正常绿色 */
}
.device-online {
    color: #409eff; /* 在线蓝色 */
}
.device-fault {
    color: #f56c6c; /* 故障红色 */
}
.device-alarm {
    color: #e6a23c; /* 告警橙色 */
}
.device-off {
    color: #909399; /* 关闭灰色 */
}
</style>
